<template>
	<scroll-view scroll-y="true" :style="{ height: scorllHeight + 'px', width: '690rpx' }" @scrolltolower="scrolltolower">
		<news-item :list="newsList"></news-item>
	</scroll-view>
</template>

<script>
import httpApi from '../../http';
import newsItem from '@/components/newsItem/newsItem.vue';
export default {
	components: { newsItem },
	data() {
		return {
			query: {
				pageindex: 1,
				pagesize: 10
			},
			scorllHeight: 0,
			newsList: [
				{
					id: 1,
					img: 'https://picsum.photos/200/200?id=23',
					title: '标题标题标题标题标题标题标题标题标题',
					content:
						'内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
					time: '2025/1/7',
					praise: 99,
					check: 20
				},
				{
					id: 2,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 3,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 4,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 5,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 6,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 7,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 8,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 9,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 10,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 11,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 12,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 13,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 14,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				},
				{
					id: 15,
					img: 'https://picsum.photos/200/200?id=223',
					title: '涵崽真的帅',
					content: '文字不足以形容了',
					time: '2099/1/7',
					praise: 999,
					check: 99
				}
			]
		};
	},
	mounted() {
		this.setScrollHeight();
		this.init();
	},
	methods: {
		init() {
			httpApi.IndexApi.getBlogList(this.query).then((res) => {
				console.log(res);
				for (let item of res.data.data) {
					item.created_at = this.getDateOnly(item.created_at);
				}
				this.newsList = res.data.data;
			});
		},
		setScrollHeight() {
			let that = this;
			uni.getSystemInfo({
				success: (res) => {
					let windowHeight = res.windowHeight; //屏幕高度
					// 获取手机顶部状态栏的高度
					const statusBarHeight = res.statusBarHeight || 0;
					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
					// 计算顶部图标距离
					const topIconDistance = statusBarHeight + navBarHeight;
					console.log(res.windowHeight - topIconDistance - 132);
					// 总高度 减去 顶部高度 减去 tabbar高度
					that.scorllHeight = res.windowHeight - topIconDistance - 132;
					// this.topIconDistance = topIconDistance; //单位px
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				}
			});
		},
		// 触底加载
		scrolltolower() {
			uni.$u.toast('触底了');
			return;
			if (this.pageindex < this.total_page) {
				this.pageindex += 1;
				this.init();
			}
		},
		getDateOnly(dateTimeString) {
			// 创建一个 Date 对象
			const date = new Date(dateTimeString);

			// 使用 toISOString() 方法获取日期时间字符串，然后截取日期部分
			// toISOString() 返回的字符串格式为 "YYYY-MM-DDTHH:mm:ss.sssZ"
			// 我们只需要 "YYYY-MM-DD" 部分
			const dateOnlyString = date.toISOString().split('T')[0];

			return dateOnlyString;
		}
	}
};
</script>

<style lang="scss" scoped></style>
